<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>2025百花轩书画艺术大赛 - 优秀作品</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        paper: '#E8DCCA',
                        ink: '#3A2E2F',
                        gold: '#D4AF37',
                        crimson: '#9E2A2B',
                        gray: '#8C8C8C',
                        lightgold: '#F5E8C7'
                    },
                    fontFamily: {
                        song: ['SimSun', 'STSong', 'serif'],
                        kai: ['KaiTi', 'STKaiti', 'serif']
                    },
                    backgroundImage: {
                        'ink-texture': "url('')"
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-paper-texture {
                background-color: theme('colors.paper');
                background-image: theme('backgroundImage.ink-texture');
            }
            .vertical-text {
                writing-mode: vertical-rl;
                text-orientation: upright;
            }
            .gold-badge {
                position: relative;
            }
            .gold-badge::after {
                content: '🏆';
                position: absolute;
                top: -10px;
                right: -15px;
                transform: rotate(15deg);
            }
            .ink-splash {
                position: relative;
            }
            .ink-splash::before {
                content: '';
                position: absolute;
                width: 100px;
                height: 100px;
                background-image: url('');
                background-size: contain;
                background-repeat: no-repeat;
                opacity: 0.1;
                z-index: 0;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                transition: all 0.3s ease;
            }
            .card-shadow:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            }
        }
    </style>
</head>
<body class="bg-paper-texture min-h-screen font-song text-ink relative overflow-x-hidden">
    <!-- 水墨装饰元素 -->
    <div class="fixed top-20 left-10 w-32 h-32 opacity-10 pointer-events-none">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <path d="M30,5 Q50,0 70,15 Q85,30 75,50 Q65,70 45,75 Q25,80 10,65 Q-5,50 15,30 Q30,10 30,5 Z" fill="#3A2E2F"/>
        </svg>
    </div>
    <div class="fixed bottom-20 right-10 w-40 h-40 opacity-10 pointer-events-none">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <path d="M70,50 Q90,30 75,10 Q60,-10 40,15 Q20,40 35,60 Q50,80 70,70 Q90,60 70,50 Z" fill="#3A2E2F"/>
        </svg>
    </div>

    <!-- 顶部宣传海报 -->
    <header class="relative w-full h-[30vh] md:h-[40vh] overflow-hidden mb-8">
        <img src="https://picsum.photos/id/1073/1200/400" alt="书画艺术大赛优秀作品宣传海报" class="w-full h-full object-cover"/>
        <div class="absolute inset-0 bg-ink/40 flex items-center justify-center">
            <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-kai font-bold text-white tracking-wider text-center px-4">
                优秀作品展示
            </h1>
        </div>
    </header>

    <!-- 作品展示区域 -->
    <main class="max-w-6xl mx-auto px-4 pb-24">
        <div class="grid grid-cols-2 gap-5 sm:gap-5 md:gap-6 px-2 min-[320px]:grid-cols-2">
            <!-- 作品卡片1 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow w-full min-w-0">
                <div class="relative pb-[100%] overflow-hidden">
                    <img src="images/shufa_01.jpg" alt="沁园春雪选段" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"/>
                </div>
                <div class="sm:p-4 p-2">
                    <h3 class="font-kai text-xl font-bold mb-1">沁园春雪选段</h3>
                    <p class="text-gray flex items-center"> 胡浩</p>
                </div>
            </div>

            <!-- 作品卡片2 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="relative pb-[100%] overflow-hidden">
                    <img src="images/shufa_02.jpg" alt="兰亭集序" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"/>
                </div>
                <div class="sm:p-4 p-2">
                    <h3 class="font-kai text-xl font-bold mb-1">兰亭集序</h3>
                    <p class="text-gray flex items-center">陈明远</p>
                </div>
            </div>

            <!-- 作品卡片3 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="relative pb-[100%] overflow-hidden">
                    <img src="images/shufa_03.jpg" alt="山水清音图" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"/>
                </div>
                <div class="sm:p-4 p-2">
                    <h3 class="font-kai text-xl font-bold mb-1">山水清音图</h3>
                    <p class="text-gray flex items-center"></i> 林秀雅</p>
                </div>
            </div>

            <!-- 作品卡片4 -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="relative pb-[100%] overflow-hidden">
                    <img src="images/shufa_04.jpg" alt="梅兰竹菊四条屏" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"/>
                </div>
                <div class="sm:p-4 p-2">
                    <h3 class="font-kai text-xl font-bold mb-1">梅兰竹菊四条屏</h3>
                    <p class="text-gray flex items-center"> 王梦琪</p>
                </div>
            </div>

            <!-- 作品卡片5 (使用网络图片) -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="relative pb-[100%] overflow-hidden">
                    <img src="https://picsum.photos/id/106/600/600" alt="书法作品展示" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"/>
                </div>
                <div class="sm:p-4 p-2">
                    <h3 class="font-kai text-xl font-bold mb-1">松风阁诗帖</h3>
                    <p class="text-gray flex items-center">赵子昂</p>
                </div>
            </div>

            <!-- 作品卡片6 (使用网络图片) -->
            <div class="bg-white rounded-lg overflow-hidden card-shadow">
                <div class="relative pb-[100%] overflow-hidden">
                    <img src="https://picsum.photos/id/152/600/600" alt="国画作品展示" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105"/>
                </div>
                <div class="sm:p-4 p-2">
                    <h3 class="font-kai text-xl font-bold mb-1">富春山居图</h3>
                    <p class="text-gray flex items-center">黄公望</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-paper/90 border-t border-ink/20 backdrop-blur-sm z-50">
        <div class="flex justify-around items-center h-16 md:h-20">
            <a href="index.html" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-colors duration-300">
                <i class="fa fa-home text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">首页</span>
            </a>
            <a href="works.html" class="flex flex-col items-center justify-center text-gold transition-colors duration-300">
                <i class="fa fa-th text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">优秀作品</span>
            </a>
            <a href="#" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-colors duration-300">
                <i class="fa fa-info-circle text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">比赛详情</span>
            </a>
            <a href="#" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-colors duration-300">
                <i class="fa fa-trophy text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">比赛大奖</span>
            </a>
        </div>
    </nav>

    <!-- 为底部导航栏添加内容间距 -->
    <div class="h-16 md:h-20"></div>

</body>
</html>